<template>
  <div>
    <basic-container
      class="basic-container"
      style="
        position: relative;
        height: calc(100% - 80px) !important;
        overflow-y: auto;
        overflow-x: hidden;
      "
    >
      <el-row>
      <el-radio-group v-model="basicContent">
        <el-radio-button :label="basicContent">基本信息</el-radio-button>
      </el-radio-group>
      <div style="padding-left: 18px;">
        <el-tag size="large" style=" align: 'center';"><span style="font-size: 14px;">客户编号:<span style="font-weight: bolder ">{{form.custNo}}</span></span></el-tag>
      </div>
      </el-row>
      <br /><br />
      <avue-form ref="form" :option="option" v-model="form" @submit="handleSubmit" @tab-click="handleTabClick">
        <template #factory>
          <factory ref="factory"></factory>
        </template>
        <template #bankInfo>
          <bank-info ref="bankInfo"></bank-info>
        </template>
      </avue-form>
    </basic-container>
    <basic-container>
      <!--<template slot="footer">-->
      <div style="display: flex; justify-content: center; width: 100%">
        <el-button
          type="primary"
          icon="el-icon-check"
          :loading="btnLoading"
          @click="$refs.form.submit()"
          v-if="this.editable"
        >
          保 存
        </el-button>
        <el-button icon="el-icon-close" @click="close" > 关 闭 </el-button>
      </div>
      <!--</template>-->
    </basic-container>
  </div>
</template>

<script>
import { getList, getDetail, add, update, remove } from '@/api/anwise/customer/customer';
import { mapGetters } from 'vuex';
import { FormMixin } from '@/mixins/FormMixin';
import Factory from './components/factory.vue';
import BankInfo from './components/bank_info.vue';
import { Pattern } from '@/utils/validate.js';
import { nextTick } from 'vue';
import func from '@/utils/func';
import { setStore, getStore } from '@/utils/store';
export default {
  components: {
    Factory,
      BankInfo,
  },

  data() {
    return {
      namw: 'customer_form',
      basicContent: 'basicContent',
        editable: true,
      customerId: '',
      form: {},
      flowList: [],
      btnLoading: false,
      disabled: false,
      id: '',
      index:'',
      option: {
        card: true,
        labelWidth: 100,
        // labelPosition:'left',
        labelSuffix: '',
        submitBtn: false,
        emptyBtn: false,
          tabs: true,
          tabsActive: 1,
        // group: [
        //   {
        //     icon: 'el-icon-info',
        //     label: '基础信息',
        //     prop: 'group12',

        column: [
            // {
            //     label: '客户编号',
            //     prop: 'custNo',
            //     type: 'input',
            //     disabled: true
            // },
            {
                label: '客户名称',
                prop: 'custName',
                type: 'input',
                rules: [
                    {
                        required: true,
                        message: '请输入客户名称',
                        trigger: 'blur',
                    },
                ],
            },
          {
            label: '英文名称',
            prop: 'custNameEn',
            type: 'input',
          },
          {
            label: '客户类别',
            prop: 'custType',
            type: 'select',
            span: 6,
              filterable:true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=customer_type',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            dataType: 'string',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入客户类别',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '停止交易',
            prop: 'stopTrading',
            type: 'select',
            span: 6,
              filterable:true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=biz_yes_no',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            dataType: 'string',
            search: true,
              rules: [
                  {
                      required: true,
                      message: '请选择是否停止交易',
                      trigger: 'blur',
                  },
              ],
          },
          {
            label: '贸易条款',
            prop: 'tradeTerms',
            type: 'select',
            span: 6,
            filterable:true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=trade_terms',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            dataType: 'string',
            search: true,
            rules: [
              {
                required: true,
                message: '请选择贸易条款',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '运输方式',
            prop: 'tansportModes',
            type: 'select',
            span: 6,
            filterable:true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=tansport_modes',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            dataType: 'string',
            search: true,
            rules: [
              {
                required: true,
                message: '请选择运输方式',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '信用额度',
            prop: 'creditLimit',
              type: 'number',
            clearable: true,
              min:0,
              max:9999999999,
              controls:false,
            span: 6,
            rules: [
              {
                required: false,
                // message: "请输入邮箱",
                // trigger: "blur"
              },
              {
                pattern: Pattern.amount,
                message: '格式不正确',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '客户地址',
            prop: 'custAddr',
            type: 'input',
            span: 12,
            rules: [
              {
                required: true,
                message: '请输入客户地址',
                trigger: 'blur',
              },
            ],
          },

          {
            label: '付款条件',
            prop: 'paymentTerms',
            type: 'select',
            span: 12,
              filterable:true,
              dicUrl: '/api/blade-system/dict-biz/dictionary?code=pay_condition',
              props: {
                  label: 'dictValue',
                  value: 'dictKey',
              },
              dataType: 'string',
          },
          {
            label: '内部提醒',
            prop: 'internalReminder',
            type: 'textarea',
            minRows: 2,
            span: 12,
            hide: true,
          },
          {
            label: '箱唛备注',
            prop: 'cartonMarkRemark',
            type: 'textarea',
            minRows: 2,
            span: 12,
            hide: true,
          },
          {
            label: '销售备注',
            prop: 'salesRemark',
            type: 'textarea',
            minRows: 2,
            span: 12,
            hide: true,
          },
          {
            label: '生产备注',
            prop: 'prodRemark',
            type: 'textarea',
            minRows: 2,
            span: 12,
            hide: true,
          },
          {
            label: '联系人1',
            prop: 'contact1',
            type: 'input',
            span: 6,
          },
          {
            label: '联系人1部门',
            prop: 'contactDept1',
            type: 'input',
            hide: true,
            span: 6,
          },
          {
            label: '联系人1电话',
            prop: 'contactPhone1',
            type: 'input',
            span: 6,
          },
          {
            label: '联系人1邮箱',
            prop: 'contactMail1',
            type: 'input',
            span: 6,
            rules: [
              {
                required: false,
                // message: "请输入邮箱",
                // trigger: "blur"
              },
              {
                pattern: Pattern.email,
                message: '格式不正确',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '联系人2',
            prop: 'contact2',
            type: 'input',
            hide: true,
            span: 6,
          },
          {
            label: '联系人2部门',
            prop: 'contactDept2',
            type: 'input',
            hide: true,
            span: 6,
          },
          {
            label: '联系人2电话',
            prop: 'contactPhone2',
            type: 'input',
            hide: true,
            span: 6,
          },
          {
            label: '联系人2邮箱',
            prop: 'contactMail2',
            type: 'input',
            hide: true,
            span: 6,
            rules: [
              {
                required: false,
                // message: "请输入邮箱",
                // trigger: "blur"
              },
              {
                pattern: Pattern.email,
                message: '格式不正确',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '联系人3',
            prop: 'contact3',
            type: 'input',
            hide: true,
            span: 6,
          },
          {
            label: '联系人3部门',
            prop: 'contactDept3',
            type: 'input',
            hide: true,
            span: 6,
          },
          {
            label: '联系人3电话',
            prop: 'contactPhone3',
            type: 'input',
            hide: true,
            span: 6,
          },
          {
            label: '联系人3邮箱',
            prop: 'contactMail3',
            type: 'input',
            hide: true,
            span: 6,
            rules: [
              {
                required: false,
                // message: "请输入邮箱",
                // trigger: "blur"
              },
              {
                pattern: Pattern.email,
                message: '格式不正确',
                trigger: 'blur',
              },
            ],
          },
        ],
        group: [
          {
            icon: 'el-icon-house',
            label: '工厂信息',
            prop: 'group1',
            column: [
              {
                label: '',
                  className:'addPadding',
                prop: 'factory',
                span: 24,
                labelWidth: 0,
                formslot: true,
                display: true,
              },
            ],
          },
          {
            icon: 'el-icon-bank-card',
            label: '银行信息',
            prop: 'group2',
              column: [
                  {
                      label: '',
                      prop: 'bankInfo',
                      span: 24,
                      labelWidth: 0,
                      formslot: true,
                      display: true,
                  },
              ],
          },
        ],
      },

      // {
      //   icon: 'el-icon-house',
      //   label: '工厂信息',
      //   prop: 'group2',
      // }
      //      ],
      //     }
    };
  },
  created() {
    console.log(this.$route.params);
    console.log(this.$route.query);
    // this.init();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate');
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用
    // 可以访问组件实例 `this`
    if (to.fullPath !== from.fullPath) {
      next();
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'permission']),
    // permissionList() {
    //   return {
    //     addBtn: this.validData(this.permission.dict_add, false),
    //     viewBtn: this.validData(this.permission.dict_view, false),
    //     delBtn: this.validData(this.permission.dict_delete, false),
    //     editBtn: this.validData(this.permission.dict_edit, false)
    //   };
    // }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log(this.$route.query.customerId);
      this.id = this.$route.query.customerId;
      this.editable = this.$route.query.editable ==='false' ? false : true
        console.log(this.editable);
        if (this.$route.query.customerId) {
        this.$nextTick(() => {
            setTimeout(() => {
          getDetail(this.$route.query.customerId).then(res => {
            console.log(res);
            if (res.data.success) {
              this.form = res.data.data;
                this.$refs.factory.setData(this.form.factoryList, this.editable);
                this.$refs.bankInfo.setData(this.form.bankList);
              console.log(this.form);
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg ? res.data.msg : '获取客户详情失败!',
              });
            }
          });
            }, 500);
        });
        this.initEditable();
      }
    },
      initEditable() {
        this.option.column.forEach(item => {
            item.disabled= !this.editable;
            item.placeholder= !this.editable ? " " : "";
        })
      },
    bindFiled(filed, val) {
      let detailInfo = this.option.group[0].column;
      this.findObject(detailInfo, filed).value = val;
      this.form[filed] = val;
    },
    handleSaveDraft() {
      this.form.isSubmit = 0;
      this.saveCustomer(this.form);
    },
    handleSubmit(form, done) {
      console.log(form);
      form.isSubmit = 1;
      this.saveCustomer(form);
        done();
    },
    saveCustomer(form) {
      this.$refs.factory.$refs.tableRef.validate().then(errMap => {
        console.log(!errMap);
        if (errMap) {
            if (!!this.index && this.index !== 0) {
                this.$message({
                    type: 'error',
                    message: '工厂信息有误！',
                });
                this.option.tabsActive = 1;
            }
          return;
        }
        this.btnLoading = true;
          this.form.factoryList = this.$refs.factory.$refs.tableRef.getTableData().fullData;
        this.form.bankList = this.$refs.bankInfo.data;
        console.log(this.$refs.factory.$refs);
        console.log(this.form.factoryList);
        update(this.form).then(res => {
          this.btnLoading = false;
          if (res && res.data.success) {
            this.$message({
              type: 'success',
              message: res.data.msg ? res.data.msg : '保存成功!',
            });
            this.$emit('success');
            this.saveAfter();
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg ? res.data.msg : '保存失败!',
            });
          }
        }).catch(err => {
            console.log(err)
            this.btnLoading = false;
        })
      });
    },
    saveAfter() {
      this.close();
    },
    close() {
      // if (this.$route.params.id) {
      //   this.$store.commit("DEL_TAG_META_VALUE", "NEW_CUSTOMER_DETAIL");
      // } else {
      this.$store.commit('DEL_TAG', this.$router.currentRoute.value);
      // }
      // if (this.$route.params.router && this.$route.params.router === 'my_task') {
      this.$router.push('/anwise/customer/customer_info');
      window.top.document.querySelector('.moveBg .title').innerHTML = '客户管理'
      // } else {
      //   this.$router.push('/ck/task/todo_task')
      // }
    },
      handleTabClick(tabs) {
          console.log(tabs);
          this.index = func.toInt(tabs.index);
          this.option.tabsActive = this.index+1 > 0 ? this.index+1 : 1;
          console.log(this.index);
      },
  },
};
</script>

<style>
.hideUpload .el-upload {
  display: none; /* 上传按钮隐藏 */
}

.hideUpload .el-upload__tip {
  display: none; /* 上传按钮隐藏 */
}

.el-col {
  margin-bottom: 0px !important;
}

.el-upload-list__item-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}

.el-upload-list__item-actions::after {
  display: inline-block;
  content: '';
  height: 100%;
  vertical-align: middle;
}

.el-upload-list__item-actions span {
  display: none;
  cursor: pointer;
}

.el-upload-list__item-actions span + span {
  margin-left: 15px;
}

.el-upload-list__item-actions:hover {
  opacity: 1;
}

.el-upload-list__item-actions:hover span {
  display: inline-block;
}

.el-form-item {
  margin-bottom: 14px !important;
}

.vxe-table--render-default.size--mini {
  font-size: 14px !important;
}
  /*.addPadding{*/
    /*padding: 20px !important;*/
  /*}*/
</style>
